import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import Constants from "../../utils/Constants";
import Header from "../../widgets/Header";

import screen from "../../utils/screen";
import OrderPage from "../../components/OrderPage";

const tabTitles = [Constants.common.all,Constants.common.pending,Constants.common.completed,Constants.common.failed]


export default class Order extends React.Component{


    state={
        activeTab:0
    }

    constructor(props){
        super(props)
    }


    componentDidMount() {


    }



    renderTabBar = () =>{
        const {activeTab} = this.state

        return (
            <View style={styles.tabBar}>
                {
                    tabTitles.map((item,index)=>{
                        const isSelect = activeTab === index
                        return (
                            <TouchableOpacity
                                key={index}
                                style={styles.tabBarItem}
                                activeOpacity={1}
                                onPress={()=>{
                                    this.setState({
                                        activeTab:index
                                    })
                                }}
                            >
                                <View style={isSelect ? styles.tabItemSelectBg  : {backgroundColor: '#fff'} }>
                                    <Text style={{fontSize:14,color:isSelect ? '#000' : '#BABABA'}}>{item}</Text>
                                </View>

                            </TouchableOpacity>
                        )
                    })
                }

            </View>
        )
    }


    renderPage() {

        return (
            <OrderPage
                tabTitle={tabTitles[this.state.activeTab]}
                navigation={this.props.navigation}
            />
        )
    }


    render(){

        return (
            <View style={styles.container}>
                <Header title={Constants.order.title} navigation={this.props.navigation}/>
                {this.renderTabBar()}
                {this.renderPage()}

            </View>
        )
    }
}


const tabItemHeight = screen.scaleSize(64)

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: '#fff'
    },
    tabBar:{
        height:screen.PIXEL_70,
        paddingHorizontal:screen.PIXEL_20,
        flexDirection:'row',
        alignItems:'center'
    },
    tabBarItem:{
        flex:1,
        justifyContent:'center',
        alignItems: 'center'
    },
    tabItemSelectBg:{
        width:screen.PIXEL_180,
        height:tabItemHeight,
        justifyContent:'center',
        alignItems: 'center',
        backgroundColor:'rgba(55,124,116,0.26)',
        borderTopLeftRadius:tabItemHeight/2,
        borderTopRightRadius: tabItemHeight/2,
        borderBottomLeftRadius:tabItemHeight/2

    }
})
